<template>
  <section class="product-new-box">
    <div class="product-new">
      <ElRow>
        <ElCol :span="24">
          <span class="must-check">* </span>产品分类：
          <ElSelect
            v-model="category"
            filterable
            placeholder="选择分类"
            :loading="loading"
          >
            <ElOption
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </ElOption>
          </ElSelect>
        </ElCol>
      </ElRow>
      <ElRow>
        <ElCol class="shop" :span="24">
          <span class="must-check">* </span>精细分类：
          <ElCheckboxGroup v-model="shop_type" class="shop-type">
            <ElCheckboxButton
              v-for="item in classification"
              :key="item.id"
              :label="item.id"
              >{{ item.type_name }}</ElCheckboxButton
            >
          </ElCheckboxGroup>
        </ElCol>
      </ElRow>
      <ElRow>
        <ElCol :span="10"
          ><span class="must-check">* </span>产品名称：
          <ElInput
            v-model="commodity_name"
            class="product-name"
            placeholder="请输入内容"
          ></ElInput>
        </ElCol>
        <ElCol :span="7"
          ><span class="must-check">* </span>
          产品价格：
          <ElInput
            v-model="price"
            class="product-price"
            placeholder=""
          ></ElInput>
          元
        </ElCol>
        <ElCol class="pics" :span="7"
          ><span class="must-check">* </span>单位：
          <ElSelect v-model="company" class="product-pics" placeholder="请选择">
            <ElOption
              v-for="item in pics"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </ElOption> </ElSelect
        ></ElCol>
      </ElRow>
      <PhotoAdd
        :img="imgUrl"
        @photoImgUrl="photoImgUrl"
        @imgLoading="imgLoading"
      />
    </div>
    <ElRow>
      <ElCol class="product-submit" :span="24">
        <ElButton round @click="addProgress">提交</ElButton>
      </ElCol>
    </ElRow>
  </section>
</template>

<script>
import Cookie from 'js-cookie';
import {http, catchAppError} from '@/util';
import url from '@/config';
import toast from '@/toast';
import {menusNavigation} from '@/store';
import PhotoAdd from './PhotoAdd.vue';

export default {
  name: 'ProductNew',
  components: {
    PhotoAdd
  },
  props: {
    params: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      loading: true,
      imgUpLoading: false,
      imgUrl: '',
      url,
      headers: {
        token: Cookie.get('token')
      },
      categoryParent: {parent: 0},
      categoryList: [],
      category: '',
      classification: [],
      commodity_name: '',
      shop_type: [],
      company: '',
      price: '',
      pics: [
        {label: '次', value: '次'},
        {label: '盒', value: '盒'},
        {label: '听', value: '听'},
        {label: '个', value: '个'},
        {label: '袋', value: '袋'},
        {label: '包', value: '包'}
      ],
      thumbnail: '',
      isEdit: false
    };
  },
  computed: {
    options() {
      // eslint-disable-next-line camelcase
      return this.categoryList.map(({id, type_name}) => ({
        label: type_name,
        value: id
      }));
    }
  },
  watch: {
    category() {
      this.categoryParent.parent = this.category;
      http
        .post(url.type, this.categoryParent)
        .then(res => {
          this.classification = res;
          !this.isEdit && (this.shop_type = []);
        })
        .catch(catchAppError);
    }
  },
  beforeMount() {
    this.getType().then(() => {
      if (this.params.id && this.params.nav === '0') {
        this.isEdit = true;
        http
          .post(url.getProduct, {commodity_id: this.params.id})
          .then(res => {
            this.commodity_name = res.commodity_name;
            this.company = res.company;
            this.price = res.price;
            this.category = res.shop_type_big;
            this.shop_type = res.shop_type;
            this.thumbnail = res.thumbnail.value;
            this.imgUrl = res.thumbnail.photo;
          })
          .catch(catchAppError);
      }
    });
  },
  methods: {
    getType() {
      this.isEdit = false;
      return http
        .post(url.type, this.categoryParent)
        .then(res => {
          this.loading = false;
          this.categoryList = res;
          this.category = this.categoryList[0].id;
        })
        .catch(catchAppError);
    },
    photoImgUrl(url) {
      this.thumbnail = url;
    },
    imgLoading(i) {
      this.imgUpLoading = i;
    },
    addProgress() {
      if (this.imgUpLoading) {
        toast('图片正在上传，稍后提交');
        return;
      }
      const allIsCheck =
        this.commodity_name &&
        this.company &&
        this.price &&
        this.shop_type.length;
      if (!allIsCheck) {
        toast('必填项不能为空');
        return;
      }
      const addParams = {
        commodity_name: this.commodity_name,
        company: this.company,
        price: this.price,
        shop_type: this.shop_type,
        thumbnail: this.thumbnail
      };
      if (this.params.id) {
        addParams.commodity_id = this.params.id;
      }
      const proUrl = this.params.id ? url.upProgress : url.addProgress;
      http
        .post(proUrl, addParams)
        .then(() => {
          this.resetData();
          menusNavigation.navTab('ProjectManage', '3');
        })
        .catch(catchAppError);
    },
    resetData() {
      this.commodity_name = '';
      this.company = '';
      this.price = '';
      this.shop_type = [];
      this.thumbnail = '';
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.product-new-box {
  padding-bottom: 140px;
  background-color: #fff;
  .product-submit {
    margin-top: 30px;
    text-align: center;
    .el-button {
      width: 230px;
      padding: 14px 0;
      background-color: #ffb03e;
      border-color: #ffb03e;
      color: #fff;
    }
  }
  .product-new {
    width: 950px;
    font-size: 16px;
    .shop {
      min-height: 23px;
    }
    .shop-type {
      width: 850px;
      display: inline-block;
      vertical-align: top;
      .el-checkbox-button {
        margin-right: 110px;
        margin-bottom: 25px;
        text-align: center;
        .el-checkbox-button__inner {
          border-left: 1px solid #b3b3b3;
          color: #333;
          border-radius: 4px;
          padding: 10px 0;
          width: 100px;
        }
      }
      .el-checkbox-button.is-checked .el-checkbox-button__inner {
        background-color: #ffb03e;
        border-color: #ffb03e;
        box-shadow: -1px 0 0 0 #ffb03e;
        color: #fff;
      }
    }
    .product-name {
      width: 240px;
    }
    .product-price,
    .product-pics {
      width: 100px;
    }
    .img-container {
      display: inline-block;
      vertical-align: top;
      .product-image {
        width: 110px;
        height: 110px;
        border: 1px dashed #666;
        display: inline-block;
        margin-right: 25px;
        vertical-align: bottom;
      }
      .avatar-uploader,
      .el-button {
        display: inline-block;
        margin-right: 25px;
        vertical-align: bottom;
      }
    }
  }
}
.el-message--error {
  top: 45% !important;
}
</style>
